:root {
  --slider-error-color: var(--color-danger);
  --slider-track-background: #bdbdbd;
  --slider-track-height: 2px;
  --slider-track-border-radius: 0;
  --slider-track-fill-border-radius: 0;
  --slider-track-fill-background: var(--color-primary);
  --slider-thumb-block-background: var(--color-primary);
  --slider-thumb-ripple-background: var(--color-primary);
  --slider-thumb-label-background: var(--color-primary);
  --slider-thumb-label-font-size: var(--font-size-sm);
  --slider-thumb-label-text-color: var(--color-on-primary);
  --slider-thumb-size: 12px;
  --slider-disabled-opacity: var(--opacity-disabled);
}

.var-slider {
  -webkit-tap-highlight-color: transparent;
  width: 100%;

  &-block {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    user-select: none;
    height: 36px;
    margin: 0 6px;
    transition: filter 0.25s;
  }

  &--disabled {
    filter: opacity(var(--slider-disabled-opacity));
    cursor: not-allowed;
  }

  &-track {
    width: 100%;
    align-items: center;
    position: relative;

    &-background {
      width: 100%;
      height: var(--slider-track-height);
      background: var(--slider-track-background);
      transition: filter, background-color, 0.25s;
      border-radius: var(--slider-track-border-radius);
    }

    &-fill {
      position: absolute;
      height: 100%;
      left: 0;
      transition: background-color 0.25s;
      background-color: var(--slider-track-fill-background);
      border-radius: var(--slider-track-fill-border-radius);
    }
  }

  &-thumb {
    position: absolute;
    cursor: pointer;

    &-block {
      position: absolute;
      width: var(--slider-thumb-size);
      height: var(--slider-thumb-size);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: background-color 0.25s;
      z-index: 1;
      background-color: var(--slider-thumb-block-background);
    }

    &-ripple {
      position: absolute;
      width: 36px;
      height: 36px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      opacity: 0.3;
      background: transparent;
      transition: 0.3s var(--cubic-bezier);

      &--active {
        background: var(--slider-thumb-ripple-background);
      }
    }

    &-label {
      height: 24px;
      width: 24px;
      background-color: var(--slider-thumb-label-background);
      display: flex;
      align-items: center;
      border: none;
      justify-content: center;
      color: var(--slider-thumb-label-text-color);
      border-radius: 50% 50% 0;
      padding: 13px;
      bottom: 60%;
      user-select: none;
      position: absolute;
      left: 45%;
      transition: 0.3s var(--cubic-bezier);
      font-size: var(--slider-thumb-label-font-size);
      overflow: hidden;
      transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);

      span {
        transform: rotate(-45deg);
      }

      &--active {
        transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);
      }
    }
  }

  &__form[var-slider-cover] {
    margin: 0;
  }
}

.var-slider__horizontal {
  .var-slider();

  &--error {
    .var-slider__horizontal-track {
      &-background {
        background-color: var(--slider-error-color) !important;
        filter: opacity(0.6);
      }

      &-fill {
        background-color: var(--slider-error-color) !important;
      }
    }

    .var-slider__horizontal-thumb {
      &-block {
        background-color: var(--slider-error-color) !important;
      }

      &-ripple--active {
        background-color: var(--slider-error-color) !important;
      }

      &-label {
        background-color: var(--slider-error-color) !important;
      }
    }
  }
}

.var-slider__vertical {
  .var-slider();

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;

  &-block {
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    user-select: none;
    margin: 6px 0;
    transition: filter 0.25s;
  }

  &-track {
    height: 100%;
    width: fit-content;

    &-background {
      width: var(--slider-track-height);
      height: 100%;
      background: var(--slider-track-background);
      transition: filter, background-color, 0.25s;
    }

    &-fill {
      width: 100%;
      bottom: 0;
    }
  }

  &-thumb {
    &-label {
      transform: translateX(0) translateX(0) translateY(50%) rotate(-225deg) scale(0);

      span {
        transform: rotate(-135deg);
      }

      &--active {
        transform: translateX(20%) translateX(8px) translateY(50%) rotate(-225deg) scale(1);
      }
    }
  }

  &--error {
    .var-slider__vertical-track {
      &-background {
        background-color: var(--slider-error-color) !important;
        filter: opacity(0.6);
      }

      &-fill {
        background-color: var(--slider-error-color) !important;
      }
    }

    .var-slider__vertical-thumb {
      &-block {
        background-color: var(--slider-error-color) !important;
      }

      &-ripple--active {
        background-color: var(--slider-error-color) !important;
      }

      &-label {
        background-color: var(--slider-error-color) !important;
      }
    }
  }
}
